@charset "utf-8";


body{
	padding:0%;
	margin:0%;
	
	
	background:url(/front-end/project/背景图.png);
	background-size:100% 1375px;
	background-repeat:no-repeat;
	
	
		
	}
	.ding{
		width: 800px;
		height: 800px;
		background: url(天元鼎_爱给网_aigei_com.png);
		background-repeat:no-repeat;
		background-size:contain;
		animation:ding 10s linear forwards;
		}
		@keyframes ding{
				
			95%{
				left:939px;
				top:654px;
			}
			100%{
				left:2356px;
				top:1554px;
			}
		}
		
		/* 哪吒 */
	.d1{
		width:600px;
		height:600px;
		background: url(哪吒1.png);
		background-repeat:no-repeat;
		background-size:contain;
	animation:d1 5s linear 1;
	animation:d1 19s forwards;
	
		
	}
	@keyframes d1{
		0%{
			left:975px;
			top:185px;
		}
		10%{
			left:975px;
			top:175px;
		}
		20%{
			left:975px;
			top:165px;
		}
		30%{
			left:975px;
			top:155px;
		}
		40%{
			left:975px;
			top:145px;
		}
		60%{
			left:975px;
			top:135px;
		}
		80%{
			left:975px;
			top:125px;
		}
	
		100%{
			background:none;
		}
		}
	/* 敖丙 */
	.d2{
		width:600px;
		height:600px;
		background: url(敖丙.png);
		background-repeat:no-repeat;
		background-size:contain;
		animation:d2 5s ease-out;
		animation:d2 19s forwards;
	
		
	}
	@keyframes d2{
		0%{
			left: 1170px;
			top:-800px;
		}
		10%{
			left: 1170px;
			top: -810px;
		}
		20{
			left: 1170px;
			top:-820px;
		}
		30%{
			left:1170px;
			top:-830px;
		}
		40%{
			left: 1170px;
			top:-840px;
		}
		75%{
			left: 1170px;
			top:-950px;
		}
		100%{
			background:none;
		}
	}
	
	/* 老登 */
	.d3{
		width:400px;
		height:400px;
		background: url(老登.png);
		background-repeat:no-repeat;
		background-size:contain;
		animation:d3 5s linear 1;
		animation:d3 19s forwards;
		
	}
	@keyframes d3{
		0%{
		    left: 1023px;
			top:-608px;
		}
		10%{
			left: 1023px;
			top:-618px;
		}
		20%{
			left: 1023px;
			top:-628px;
		}
		30%{
			left: 1023px;
			top:-638px;
		}
		40%{
			left: 1023px;
			top:-648px;
		}
		75%{
			left: 1023px;
			top:-668px;
		}
		100%{
			background:none;
		}
	}
	/* 破鼎 */
	.d4{ 
		width:800px;
		height:800px;
		background:none;
	
		animation:d4 5s 5s forwards;
		
	}
	@keyframes d4{
			0%{
				background: none;
			}
				
			50%{
				background-image:url(image0.png);
			background-size:cover;
			}
	         100%{
					background: none;
	}
		}
	/* 哪吒胡巴 */
	.d5{
		width:400px;
		height: 400px;
	    background:url(哪吒胡巴img.png);
	    background-size:cover;
		transform: translateX(-100%);
		opacity: 0;
		animation:d5 20s linear forwards;
	}
	
	@keyframes d5{
		45%{
			transform: translateX(0);
			opacity: 1;
		}
		46%{
			 transform:translateX(230px) translateY(150px) rotate(-45deg);
		}
		60%{
			left: 450px;
			top: -2500px;
			
			opacity: 1;
		}
		65%{
			left: 1100px;
			top:-2500px;
			transform: rotate(-45deg);
			opacity: 1;
		}
		70%{
			left: 450px;
			top:-2500px;
			transform: rotate(-45deg);
			opacity: 1;
		}
		75%{
			left: 1100px;
			top:-2500px;
			transform: rotate(-45deg);
			opacity: 1;
		}
		80%{
			left: 450px;
			top:-2500px;
			transform: rotate(-45deg);
			opacity: 1;
			
		}
		
		81%{
			left: 1100px;
			top:-2500px;
			transform: rotate(-45deg);
			opacity: 1;
		}
		100%{
			left: 450px;
			top:-2500px;
			opacity: 1;
		}
			
		}

	
	
	/* 敖丙胡巴 */
	.d6{
		width: 450px;
		height: 450px;
	    background:url(敖丙胡巴img.png);
		background-repeat:no-repeat;
		
		background-size:cover;
		transform: translateX(-100%);
		opacity: 0;
		animation:d6 20s linear forwards;
		
	}
	
	@keyframes d6{
		45%{
			transform: translateX(0);
			opacity: 1;
		}
		46%{
			 transform:translateX(230px) translateY(150px) rotate(-45deg);
		}
		%{
			left: 800px;
			top: -1800px;
		}
		60%{
			left: 650px;
			top: -2900px;
			
			opacity: 1;
		}
		65%{
			left: 1100px;
			top:-2900px;
			transform: rotate(-45deg);
			opacity: 1;
		}
		70%{
			left: 650px;
			top:-2900px;
			transform: rotate(-45deg);
			opacity: 1;
		}
		75%{
			left: 1100px;
			top:-2900px;
			transform: rotate(-45deg);
			opacity: 1;
		}
		80%{
			left: 650px;
			top:-2900px;
			transform: rotate(-45deg);
			opacity: 1;
			
		}
		
		81%{
			left: 1100px;
			top:-2900px;
			transform: rotate(-45deg);
			opacity: 1;
		}
		100%{
			left: 650px;
			top:-2900px;
			opacity: 1;
		}
			
		}
	
	/* 挨打老登 */
.d7{
	width:600px;
	height:600px;
	background:url(挨打.png);
	background-size:contain;
	background-repeat:no-repeat;
	transform: translateX(-100%);
	opacity: 0;
	animation:d7 20s linear forwards;
	
}
@keyframes d7{
	45%{
		transform: translateX(0);
	opacity: 1;
	}
	
	80%{
		
		left:1600px;
		top:-3400px;
		opacity: 1;
	}
	81%{
		left:2800px;
		top:-3400px;
		opacity: 1;
	}
	100%{
		left:1600px;
		top:-3400px;
		opacity: 1;
	}
}
	
	
	
		
		
	
